製造業でのトレーサビリティ向上に役立ちそう!「マイクロ QR コード」および「rMQRコード」に対応した QR スキャナーを Next.js で実装してみた
2024.09.05こんにちは、製造ビジネステクノロジー部の若槻です。
デンソーウェーブ社が開発した二次元コードである QR コードには、通常の形式（モデル 1、モデル 2）に加えて、マイクロ QR コード と rMQR コードという形式がサポートされています。
以下は各形式の簡単な比較表です。
| QR コード種類 | QRコード(モデル2) | rMQRコード | マイクロ QR コード |
|---|---|---|---|
| イメージ例 |  |
 |
 |
| セルサイズ(最大) | 177×177 | 17×139 | 17×17 |
| セルサイズ(最小) | 21×21 | 7×43 | 11×11 |
| 最大容量(英数字) | 4,296文字 | 219文字 | 21文字 |
マイクロ QR コードと rMQR コードは通常の形式に比べて小さなスペースに表示できるため、小型の部品や製造品にも貼付することができます。よって QR コードに製品の追跡情報を埋め込むことにより、製造業におけるトレーサビリティ向上に役立つことが期待できます。
具体例としては、製品の製造に関して次のようなステップがある場合に、製品に貼付された QR コードをスキャンするだけで製品情報を参照できたり、ステップの完了を記録できたりするようなシステムが考えられます。
製造 → 出荷前検査 → 出荷 → 導入前検査 → 導入 → 運用 → 廃棄
今回は、マイクロ QR コードおよび rMQR コードに対応した QR スキャナーを Next.js で実装してみました。
このブログで触れないこと
- QR コードの詳細な技術仕様
- コードスキャン時のコツ、チューニング
ライブラリ選定
Next.js(React)に対応した QR スキャナーライブラリはいくつかありますが、その中でマイクロ QR コードおよび rMQR コードに対応しているものは多くありません。著名な QR コードスキャナーライブラリである soldair/node-qrcode も残念ながら未対応となります。
| 最終更新 | スター数 | マイクロ QR 対応 | rMQR コード対応 | 備考 | |
|---|---|---|---|---|---|
| yudielcurbelo/react-qr-scanner | 3週間前 | 216 | ◯ | ◯ | |
| nodejs-barcode | 2日前 | 26 | ◯ | ✗ | 要ライセンスキー |
| soldair/node-qrcode | 先月 | 7.4K | ✗ | ✗ |
今回は、上記のうちマイクロ QR コードおよび rMQR コードの双方に対応しているうちで最もスター数が多い yudielcurbelo/react-qr-scanner を採用しました。
サンプルアプリ実装
Next.js アプリ初回セットアップ
ドキュメントを参考に、TypeScript ベースの Next.js アプリの初回セットアップを行います。
npx create-next-app sample-next-app --typescript
cd sample-next-app
yudielcurbelo/react-qr-scanner の導入
@yudiel/react-qr-scanner を npm でインストールします。
npm install @yudiel/react-qr-scanner
スキャナー画面の実装
スキャナー機能を追加する画面の実装です。Scanner コンポーネントがスキャナーで、スキャン時のコールバック関数および対応させたい QR コードの形式を指定できます。
'use client';
import React, { useState } from 'react';
import { Scanner, IDetectedBarcode } from '@yudiel/react-qr-scanner';
const Home = () => {
const [scanResult, setScanResult] = useState({ format: '', rawValue: '' });
const handleScan = (results: IDetectedBarcode[]) => {
if (results.length > 0) {
setScanResult({
format: results[0].format,
rawValue: results[0].rawValue,
});
}
};
return (
<div className='h-screen flex flex-col items-center'>
<h1>QR コードをスキャンしてください</h1>
<div className='w-[300px]'>
<Scanner
onScan={handleScan}
formats={[
'micro_qr_code', // マイクロ QR
'rm_qr_code', // rMQR コード
]}
allowMultiple={true} // これを指定すると連続でスキャンできる
/>
</div>
{scanResult.rawValue && (
<div className='mt-4 p-2 border border-gray-300 rounded'>
<p>
<strong>フォーマット:</strong> {scanResult.format}
</p>
<p>
<strong>内容:</strong> {scanResult.rawValue}
</p>
</div>
)}
</div>
);
};
export default Home;
動作検証
検証環境
- アプリ：Mac 上で localhost で起動
- カメラ：Mac に接続した Web カメラ
バーコードと小型製品の用意
QR コードを紙に印刷します。
小型部品として電源アダプタとコードを使ってみます。紙から切り出したマイクロ QR コードと rMQR を貼付します。
スキャンしてみる
電源コードに貼られたマイクロ QR コードをスキャンしている様子です。
電源アダプタに貼られた rMQR コードをスキャンしている様子です。
動画ではどちらもすんなりスキャンできているように見えますが、実のところ rMQR コードの方はなかなか反応してくれず手間取りました。撮影時の位置や角度、明るさ、カメラの性能、QR コードの印刷品質など、スキャン時に影響を及ぼす要因は多岐にわたるので、実際に導入する際には工場などの現場での環境を考慮してチューニングが必要となりそうです。
おわりに
「マイクロ QR コード」および「rMQR コード」に対応した QR スキャナーを Next.js で実装してみました。
製造業界においては生産から販売、さらには導入後に至るまでのトレーサビリティを可視化することの必要性が叫ばれて久しいです。小さなスペースでも利用できるマイクロ QR コードおよび rMQR コードを活用することにより、製造現場におけるトレーサビリティの向上やシステム化をより前に進めることができるのではないでしょうか。
参考
サンプル QR コード生成に利用したサイト
その他
以上
